<template>
    <div style="margin:20px auto;">
        <el-row justify="space-between">
            <el-col :span="1">
                <el-button color="#626aef" @click="addDoctorTableVisible = true">添加医生</el-button>
            </el-col>
            <el-col :span="9">
                <el-input v-model="searchText" style="width: 240px" size="large" placeholder="输入姓名" suffix-icon="Search"
                    @change="searchDoc" />
            </el-col>
        </el-row>
    </div>
    <!-- 医生列表表格 -->
    <el-table :data="tableData" style="width: 100%" max-height="530px" border stripe>
        <!-- <el-table-column prop="id" label="编号" width="80" /> -->
        <el-table-column fixed label="序号" width="80" type="index" />
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="age" label="年龄" width="80" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="specialization" label="专业" />
        <el-table-column prop="position" label="职级" width="150" />
        <el-table-column prop="createdAt" label="入职日期" width="100" />
        <el-table-column label="状态" prop="status" width="100">
            <template #default="scope">
                <el-tag v-if="scope.row.status == 1" type="danger">工作中</el-tag>
                <el-tag v-else type="success">休息中</el-tag>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
            <template #default="scope">
                <el-button type="primary" @click="dialogFormVisible = true, getThisDoctor(scope.row)">编辑</el-button>
                <el-button v-if="scope.row.status == 2" @click="statusChange(scope.row.id)" type="warning">工作</el-button>
                <el-button v-else type="success" @click="statusChange(scope.row.id)">休息</el-button>
                <el-button type="danger" @click="deleteDoc(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 医生编辑表格 -->
    <el-dialog v-model="dialogFormVisible" title="编辑" width="400" center>
        <el-from :model="updateDoctor" label-width="auto" style="max-width: 600px">
            <el-form-item label="医生姓名">
                <el-input v-model="updateDoctor.name" />
            </el-form-item>
            <el-form-item label="医生电话">
                <el-input v-model="updateDoctor.phone" />
            </el-form-item>
            <el-form-item label="医生年龄">
                <el-input v-model="updateDoctor.age" />
            </el-form-item>
            <el-form-item label="医生专业">
                <!-- <el-input v-model="updateDoctor.specialization" /> -->
                <el-select v-model="value" clearable placeholder="请选择专业" style="width: 240px">
                    <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="医生职级">
                <el-select v-model="positionValue" clearable placeholder="请选择职级" style="width: 240px">
                    <el-option v-for="(item, index) in position" :key="index" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit(updateDoctor)">修改</el-button>
                <el-button @click="dialogFormVisible = false">取消</el-button>
            </el-form-item>
        </el-from>
    </el-dialog>
    <!-- 新增医生页面 -->
    <el-dialog v-model="addDoctorTableVisible" title="新增" width="400" center>
        <el-from label-width="auto" style="max-width: 600px">
            <el-form-item label="医生姓名">
                <el-input v-model="newName" />
            </el-form-item>
            <el-form-item label="医生电话">
                <el-input v-model="newPhone" />
            </el-form-item>
            <el-form-item label="医生年龄">
                <el-input v-model="newAge" />
            </el-form-item>
            <el-form-item label="医生专业">
                <!-- <el-input v-model="updateDoctor.specialization" /> -->
                <el-select v-model="newSpecialization" clearable placeholder="请选择专业" style="width: 240px">
                    <el-option v-for="(item, index) in options" :key="index" :label="item.name" :value="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item label="医生职级">
                <el-select v-model="newPosition" clearable placeholder="请选择职级" style="width: 240px">
                    <el-option v-for="(item, index) in position" :key="index" :label="item.name" :value="item.name" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addSubmit()">添加</el-button>
                <el-button @click="addDoctorTableVisible = false">取消</el-button>
            </el-form-item>
        </el-from>
    </el-dialog>
    <el-backtop :right="100" :bottom="100" />
</template>

<script>
import { doctorList, updateStatus, updateDoctors, addDoctor, searchDoctor,delDoctor,userConfigByType } from '@/views/api';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue'



export default {

    data() {
        return {
            // 初始化表格数据
            tableData: [],
            // 定义编辑框是否显示
            dialogFormVisible: ref(false),
            // 定义添加框是否显示
            addDoctorTableVisible: ref(false),
            // 编辑数据
            doctor: {},
            // 修改数据
            updateDoctor: {},
            // 搜索框内容
            searchText: ref(''),
            // 专业列表
            options: [],
            // 专业选项
            value: ref(''),
            // 职级
            position: [],
            // 职级参数
            positionValue: ref(''),
            // 新增医生信息
            newName: ref(''),
            newAge: ref(''),
            newPhone: ref(''),
            newSpecialization: ref(''),
            newPosition: ref(''),
        }
    },
    methods: {
        // 获取医生列表
        getDoctors() {
            doctorList().then(res => {
                this.tableData = res.data.data;
            })
        },
        getThisDoctor(item) {
            // console.log(item);
            // 进行浅拷贝
            this.positionValue = null;
            this.value = null;
            this.updateDoctor = Object.assign({}, item)
            // 打印对象
            // console.log(this.updateDoctor);
        },
        // 修改医生工作状态
        statusChange(id) {
            updateStatus({
                id
            }).then(res => {
                if (res.data) {
                    ElMessage({
                        message: '成功',
                        type: 'success'
                    });
                    setTimeout(2000)
                    location.reload();
                } else {
                    ElMessage({
                        message: '失败',
                        type: 'error'
                    });
                    location.reload();
                }
            })
        },
        // 提交修改
        onSubmit() {
            // console.log(this.updateDoctor);
            updateDoctors({
                id: this.updateDoctor.id,
                name: this.updateDoctor.name,
                phone: this.updateDoctor.phone,
                age: this.updateDoctor.age,
                specialization: this.value,
                position: this.positionValue,
            }).then(res => {
                if (res.data.data) {
                    this.dialogFormVisible = false;
                    setTimeout(2000)
                    ElMessageBox({
                        message: '修改成功',
                        type: 'success'
                    }).then(() => {
                        location.reload();
                    })
                } else {
                    ElMessageBox({
                        message: '修改失败',
                        type: 'error'
                    }).then(() => {
                        location.reload();
                    })
                }
            })
        },
        // 提交添加
        addSubmit() {
            addDoctor({
                name: this.newName,
                phone: this.newPhone,
                age: this.newAge,
                specialization: this.newSpecialization,
                position: this.newPosition,
            }).then(res => {
                if (res.data.data) {
                    this.addDoctorTableVisible = false;
                    setTimeout(2000)
                    ElMessageBox({
                        message: '添加成功',
                        type: 'success'
                    }).then(() => {
                        location.reload();
                    })
                } else {
                    ElMessageBox({
                        message: '添加失败',
                        type: 'error'
                    }).then(() => {
                        location.reload();
                    })
                }
            })
        },
        // 搜索医生
        searchDoc() {
            console.log(this.searchText);
            searchDoctor({
                name: this.searchText
            }).then(res => {
                if(res.data.data.length > 0) {
                    this.tableData = res.data.data;
                }else{
                    ElMessageBox({
                        message: '查无此人',
                        type: 'error'
                    })
                    this.getDoctors();
                }
            }
            )
        },
        // 删除医生
        deleteDoc(id){
            // console.log(id);
            delDoctor({
                id: id
            }).then(res => {
                if(res.data.data) {
                    ElMessageBox({
                        message: '删除成功',
                        type: 'success'
                    }).then(() => {
                        location.reload();
                    })
                }else{
                    ElMessageBox({
                        message: '删除失败',
                        type: 'error'
                    }).then(() => {
                        location.reload();
                    })
                }
            })
        }
    },
    // 页面初始化
    mounted() {
        // 初始化获取医生数据
        this.getDoctors();
        userConfigByType({type:1}).then(
            res => {
                this.options = res.data.data;
            }
        );
        userConfigByType({type:2}).then(
            res => {
                this.position = res.data.data;
            }
        );
    }
}
</script>

<style>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
</style>